<template>
        <div class="newsinfo-container">
            <h3 class="title">{{newsinfo.title}}</h3>
            <!-- route.params.id 可以获取 路由链接中的id  -->
            <p class="subtitle">
                <span>发表时间：{{newsinfo.add_time | dataFormat}}</span>
                <span>点击 : {{newsinfo.click}}次</span>
            </p>
    
            <hr>
            <div class="thumbs">
                <vue-preview :slides="list" @close="handleClose"></vue-preview>
            </div>

            <div class="content" v-html="newsinfo.content">
    
            </div>
            <Comment :id="0"></Comment>
        </div>
    
    </template>
    
    <script type="text/javascript">
        import Comment from '../subcomponents/comment.vue'
        import { Toast } from 'mint-ui';
         export default{
             data () {
                 return {
                     id: this.$route.params.id,
                     newsinfo: {},
                     list: []
                 }
             },
             created() {
                 this.getNewsInfo(),
                 this.getThumbs()
             },
             methods: {
                 getNewsInfo(){
                     this.$http.get('newsInfo/' + this.id + '.php').then( result => {
                         if(result.body.status === 0){
                             console.log(result.body)
                            this.newsinfo = result.body.Message
                         }else{
                             Toast('获取新闻列表失败')
                         }
                     })
                 },
                 getThumbs(){
                     this.$http.get('getImageList/getthumimage.php').then( res => {
                        if(res.body.status === 0){
                            this.list = res.body.Message;
                        }
                     })
                 },
                 handleClose () {
                    console.log('close event')
                 }
             },
             components: {
                Comment
             }
        }
    </script>
    <style lang="scss">
        .newsinfo-container{
            padding: 0 4px;
            .title {
                font-size: 16px;
                text-align: center;
                margin: 15px 0;
                color: red;
            }
            .subtitle {
                font-size: 13px;
                color: #226aff;
                display: flex;
                justify-content:space-between;
            }
            .content {
                img{
                    width: 100%;
                }
            }
            .thumbs{

            }
        }
    </style>